<template>
  <div class="c-bg-sgray c-ph24">
    <div class="c-flex-row c-aligni-center c-justify-sb c-pt30 c-pb20">
      <div class="c-fs22 c-fc-gray">累计收益(不含预计收益)：<span class="c-fc-xblack">{{totalBonus}}</span></div>
      <div class="c-fs22 c-fc-xblack c-flex-row c-aligni-center" @click="isShowSet = true;"><span>{{type == 1 ? '近7天' : type == 2 ? '本月' :  type == 3 ? '上个月' :  type == 4 ? '累计' : type == 6 ? '下个月' : '自定义'}}</span><span class="iconfont c-fs18 c-fc-xblack c-fw500 c-ml8" :class="isShowSet ? '' : 'c-rotate180'">&#xe67a;</span></div>
    </div>
    <div v-for="(item, index) in dataList" :key="index" @click="goBonusDetail(item)" class="c-bg-white c-br10 c-ph20 c-pv30 c-mb20 c-flex-row c-aligni-start">
      <div class="c-ww60 c-hh60 c-brp50 c-flex-row c-flex-center bonus-bg"><div class="iconfont c-fs32 c-fc-white">&#xe8d2;</div></div>
      <div class="c-w0 c-flex-grow1 c-ml20">
        <div class="c-fs26 c-fc-xblack">{{item.userType == 40 ? item.areaName : item.userType == 41 ? item.cityName : item.userType == 42 ? item.provinceName : fromText[item.userType]}}<span v-if="item.userType != 10 && item.userType != 20">({{chainConf.arrTypeName[item.userType]}})</span></div>
        <div class="c-fs20 c-fc-gray c-mt20">{{item.status == 0 ? item.dataDate.split(' ')[0] : item.dataDate}}</div>
      </div>
      <div class="c-flex-column c-aligni-end">
        <div class="c-fs26 c-fc-xmlred">{{item.amount}}</div>
        <div v-if="item.status == 0" class="c-mt10 c-ww96 c-hh30 c-fs20 c-fc-xmlred yjsy-bg c-flex-row c-flex-center c-br8">预计收益</div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (dataList && dataList.length > 0)" :noData="dataList.length == 0" :noDataText="'暂无数据'"></loading-status-tem>
    <open-modal class="c-pz100" :openModal='isShowSet' @closeModal='isShowSet = false; timeType = type;'>
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-p c-hh800">
        <div class="c-w100 c-textAlign-c c-fs28 c-lh40 c-pt40 c-fc-xblack c-fw-b c-pb30">分红收益筛选</div>
        <i class="iconfont c-pa c-p-t20 c-p-r24 c-fc-gray c-fw600 c-fs20 c-ww30 c-hh30 c-lh30 c-textAlign-c c-brp50 c-flex-row c-flex-center" @click="isShowSet = false; timeType = type;">&#xe8fd;</i>
        <div class="c-ph40 c-p">
          <div class="c-fs22 c-fc-xblack c-fw500">选择分红类型</div>
          <div class="c-flex-row c-aligni-center c-flexw-wrap">
            <div v-for="(item, index) in bonusTypeArr" :key="index" @click="selectBonusType(index)" class="c-br8 c-fs24 c-mr16 c-mt24 c-text-hidden c-p">
              <div :class="item.isSelect ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2 c-bd1-white'" class="c-ph40 c-pv15 c-br8 c-textAlign-c c-lh24 c-p">
                {{item.name}}
                <div v-if="item.isSelect" class="c-pa check-wrap c-ww40 c-hh36 c-bd20-lt theme-bg c-flex-row c-flex-center c-pz6">
                  <span class="iconfont c-fs12 c-fc-white check-style">&#xe76c;</span>
                </div>
              </div>
            </div>
            <!-- <div class="c-ph40 c-br8 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16 c-mt24" :class="timeType == 2 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 2;">本月</div>
            <div class="c-ph40 c-br8 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16 c-mt24" :class="timeType == 3 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 3;">上个月</div>
            <div class="c-ph40 c-br8 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mt24" :class="timeType == 4 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 4;">累计</div> -->
          </div>
        </div>
        <div class="c-ph40 c-p c-mt60">
          <div class="c-fs22 c-fc-xblack c-mb24 c-fw500">选择查询时间</div>
          <div class="c-flex-row c-aligni-center c-flexw-wrap">
            <div class="c-ww128 c-br32 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16" :class="timeType == 1 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 1;">近7天</div>
            <div class="c-ww128 c-br32 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16" :class="timeType == 2 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 2;">本月</div>
            <div class="c-ww128 c-br32 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16" :class="timeType == 3 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 3;">上个月</div>
            <div class="c-ww128 c-br32 c-textAlign-c c-pv15 c-fs24 c-lh24" :class="timeType == 6 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 6;">下个月</div>
            <div class="c-mt30 c-ww128 c-br32 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16" :class="timeType == 4 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="timeType = 4;">累计</div>
            <div class="c-mt30 c-ph40 c-br32 c-textAlign-c c-pv15 c-fs24 c-lh24 c-mr16" :class="timeType == 5 ? 'theme-fc theme-bg-10 theme-bd1' : 'c-fc-xblack c-bg-f2'" @click="clickCustomTime">自定义时间</div>
          </div>
          <div class="c-mt30 c-flex-row c-justify-sb c-aligni-center" id="data-time" v-if="timeType == 5">
            <div id="startDate" class="c-ww250 c-pv15 c-fs24 c-lh24 c-textAlign-c c-br30 theme-fc " :class="dataTimeIndex == 1 ? 'theme-bd1' : 'c-bd1-gray'">
              <datetime :themeColor="$getThemeColor()" min-year="2015" max-year="2100" v-model="startDate" start-date="2015-01-01" @on-show="showTime(1)" @on-confirm="confirmTime($event, 0)"
                placeholder="年-月-日" value-text-align="center"></datetime>
            </div>
            <span class="c-fs20 c-fc-xblack">至</span>
            <div id="endDate" class="c-ww250 c-pv15 c-fs24 c-lh24 c-fc-xblack c-textAlign-c c-br30 " :class="dataTimeIndex == 2 ? 'theme-bd1' : 'c-bd1-gray'">
              <datetime :themeColor="$getThemeColor()" min-year="2015" max-year="2100" v-model="endDate" :start-date="startDate" @on-show="showTime(2)" @on-confirm="confirmTime($event, 1)"
                placeholder="年-月-日" value-text-align="center"></datetime>
            </div>
          </div>
        </div>
        <div class="tbtn c-w100 c-ph40">
          <div class="c-w100 c-br32 theme-bg c-fc-white c-fs24 c-textAlign-c c-pv16" @click="changeTime()">确定</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { Datetime } from 'ckjrweb-mp-ui/src/components/index';
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'ChainBonus',
  components: {
    Datetime,
    loadingStatusTem,
    OpenModal
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      isShowSet: false, //是否显示设置, false未开启设置
      startDate: '', // 自定义开始时间
      endDate: '', // 自定义结束时间
      timeType: 4, // 1：近七天，2：本月，3：上个月，4：累计，5：选择时间
      type: 4, // 1：近七天，2：本月，3：上个月，4：累计，5：选择时间
      page: 1,
      is_page: false,
      limit: 10,
      dataList: [],
      totalBonus: 0,
      isLoading: false,
      bonusType: [],
      bonusTypeArr: [{
          name: '全部',
          typeNum: -1,
          isSelect: true
        }, {
          name: '静态分红',
          typeNum: 10,
          isSelect: true
        }, {
          name: 'CEO分红',
          typeNum: 50,
          isSelect: true
        }, {
          name: '城市经理分红',
          typeNum: 40,
          isSelect: true
        }
      ],
      chainConf: '',
      fromText: {
        '10': '静态分红',
        '20': '静态分红',
        '50': 'CEO分红',
        '51': 'CEO分红',
      },
      dataTimeIndex: 0
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    goBonusDetail(bItem) {
      if (bItem.userType != 40 && bItem.userType != 41 && bItem.userType != 42)
        return;
      this.$routerGo(this, "push", {
        path: "/homePage/agent/chainBonusDetail",
        query: {
          'startAt': bItem.startAt,
          'endAt': bItem.endAt,
          'provinceId': bItem.provinceId,
          'cityId': bItem.cityId,
          'areaId': bItem.areaId
        }
      });
    },
    clickCustomTime() {
      if (this.timeType == 5) {
        return;
      }
      this.dataTimeIndex = 0;
      this.timeType = 5;
    },
    getChainConf() {
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(global.apiurl + 'chain/getChainConf',
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    selectBonusType(sIndex) {
      this.bonusTypeArr[sIndex].isSelect = !this.bonusTypeArr[sIndex].isSelect;
      if (sIndex == 0) {
        for (let i = 1; i < this.bonusTypeArr.length; i++) {
          this.bonusTypeArr[i].isSelect = this.bonusTypeArr[0].isSelect;
        }
      }
      if (sIndex != 0 && !this.bonusTypeArr[sIndex].isSelect) {
        this.bonusTypeArr[0].isSelect = false;
      }
    },
    // 时间筛选
    changeTime() {
      let hasSelectBounusType = false;
      for (let i = 1; i < this.bonusTypeArr.length; i++) {
        if (this.bonusTypeArr[i].isSelect) {
          hasSelectBounusType = true;
          break
        }
      }
      if (!hasSelectBounusType) {
        this.$showCjToast({
          text: "请选择分红类型",
          type: "warn"
        });
        return;
      }
      this.isShowSet = false;
      if (this.timeType != 5) {
        this.startDate = "";
        this.endDate = "";
        this.type = this.timeType;
        this.reGetData();
      } else {
        if (this.startDate != "" && this.endDate != "") {
          this.type = this.timeType;
          this.reGetData();
        } else {
          this.$showCjToast({
            text: "请选择自定义时间",
            type: "warn"
          });
        }
      }
    },
    showTime(index) {
      this.dataTimeIndex = index;
    },
    // 选择时间
    confirmTime(val, index) {
      if (index == 0) {
        this.startDate = val;
        if (this.endDate) {
          let endTime = utilJs.getTimeByDate(this.endDate + ' ' + '00:00:00')
          let startTime = utilJs.getTimeByDate(this.startDate + ' ' + '00:00:00')
          if (endTime < startTime) {
            this.endDate = val;
          }
        }
      } else {
        this.endDate = val;
      }
    },
    reGetData() {
      this.page = 1;
      this.dataList = [];
      this.getList();
      this.getTotalBonus();
    },
    getTypeStr() {
      this.bonusType = [];
      for (let i = 0; i < this.bonusTypeArr.length; i++) {
        if (i == 0 && this.bonusTypeArr[i].isSelect) {
          this.bonusType = [];
          break;
        }
        if (this.bonusTypeArr[i].isSelect) {
          this.bonusType.push(this.bonusTypeArr[i].typeNum)
        }
      }
      let bonusTypeStr = JSON.stringify(this.bonusType)
      return bonusTypeStr;
    },
    getList() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let bonusTypeStr = this.getTypeStr();
      utilJs.getMethod(`${global.apiurl}chainUser/getUserBonus?page=${this.page}&limit=${this.limit}&timeType=${this.type}&startTime=${this.startDate}&endTime=${this.endDate}&bonusType=${bonusTypeStr}`,
        res => {
          if (res.userType == null) {
            this.$routerGo(this, "replace", { path: "/" });
            return
          }
          if (this.page == 1) {
            this.dataList = res.data && res.data.data ? res.data.data : [];
          } else {
            this.dataList = this.dataList.concat(res.data.data);
          }
          this.page = res.data.data && (res.data.data.length >= this.limit) ? (this.page + 1) : this.page;
          this.is_page = res.data.data && (res.data.data.length >= this.limit) ? true : false;
          this.isLoading = false;
        },
        failRes => {
          this.isLoading = false;
        }
      );
    },
     getTotalBonus() {
       let bonusTypeStr = this.getTypeStr();
       utilJs.getMethod(`${global.apiurl}chainUser/getUserTotalBonus?timeType=${this.type}&startTime=${this.startDate}&endTime=${this.endDate}&bonusType=${bonusTypeStr}`,
        res => {
          this.totalBonus = res.totalBonus;
        }
      );
     },
     windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList();
        }
      });
    },
    initData() {
      this.isShowSet = false;
      this.startDate = ''; // 自定义开始时间
      this.endDate = ''; // 自定义结束时间
      this.timeType = 4; // 1：近七天，2：本月，3：上个月，4：累计，5：选择时间
      this.type = 4; // 1：近七天，2：本月，3：上个月，4：累计，5：选择时间
      this.page = 1;
      this.is_page = false;
      this.limit = 10;
      this.dataList = [];
      this.totalBonus = 0;
      this.bonusType = [];
      this.dataTimeIndex = 0;
      this.bonusTypeArr = [{
          name: '全部',
          typeNum: -1,
          isSelect: true
        }, {
          name: '静态分红',
          typeNum: 10,
          isSelect: true
        }, {
          name: 'CEO分红',
          typeNum: 50,
          isSelect: true
        }, {
          name: '城市经理分红',
          typeNum: 40,
          isSelect: true
        }
      ];
      this.getChainConf().then(res => {
        this.chainConf = res;
        this.getList();
        this.getTotalBonus();
      })
    },
    //分享
    wechatShare: function () {
      // let title = '分红收益';
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.wechatConfig(shareUrl, title, "", "", function () { });
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      // let title = '分红收益';
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.appShareTrue(title, "", shareUrl, "");
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.isLoading = false;
    if (utilJs.checkNeedInitData(this.dataList, this.page)) {
      this.initData()
    }
    setDocumentTitle("分红收益");// eslint-disable-line
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tbtn {
  position: fixed;
  bottom: 1rem;
}
.bonus-bg {
  background-image: linear-gradient(180deg, #ff6a3799 0%, #FF6A37 100%);
}
.c-bd20-lt {
  border-radius: 0.5rem 0 0 0;
}
</style>
<style>
#data-time .vux-cell-value {
  color: #333!important;
}
.check-wrap {
  right: -0.5rem;
  bottom: -0.5rem;
}
.check-style {
  position: relative;
  top: -0.2rem;
  left: -0.2rem;
}
.yjsy-bg {
  background: rgba(255, 48, 12, 0.1);
}
</style>
